import './index.scss'

const Loading = (props) => {
  return (
    <div
      className={`loading ${props.fixed ? 'loading-fixed' : ''} ${
        props.className ? props.className : ''
      }`}
    >
      <div className="sprite"></div>
      <br />
      {props.children.split('').map((item, index) => {
        return (
          <span
            key={index}
            className={`loading-text loading-text-${index + 1}`}
            style={{ animationDelay: `${index * 0.1}s` }}
          >
            {item}
          </span>
        )
      })}
    </div>
  )
}

export default Loading
